﻿<template>
    <el-dialog title="现场调查表" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true"
        class="SHZY-dialog SHZY-dialog_center" lock-scroll width="50%">
        <el-row :gutter="15" class="" :style="{ margin: '0 auto', width: '100%' }">
            <el-form ref="elForm" size="small" label-width="100px" label-position="left" :model="dataForm"
                :rules="rules" :disabled="readOnly">
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model='dataForm.projectName' placeholder='请输入' clearable
                            :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="订单号" prop="orderNo">
                        <el-input v-model='dataForm.orderNo' placeholder='请输入' clearable :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="客户名称" prop="customerCode">
                        <el-input v-model='dataForm.customerCode' placeholder='请输入' clearable
                            :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="工地地址" prop="gdAddress">
                        <el-input v-model='dataForm.gdAddress' placeholder='请输入' clearable :style='{ "width": "100%" }'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="200" label="反馈问题描述：" prop="feedbackRemark">
                        <el-input v-model='dataForm.feedbackRemark' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="反馈人" prop="feedbackUserId">
                        <user-select v-model='dataForm.feedbackUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="反馈日期" prop="feedbackDate">
                        <el-date-picker v-model='dataForm.feedbackDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label-width="200" label="现场调查及处理过程" prop="process">
                        <el-input v-model='dataForm.process' type="textarea" maxlength="500" show-word-limit
                            placeholder='请输入内容' clearable :style='{ "width": "100%" }' :rows="3">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="调查人确认" prop="confirmedUserId">
                        <user-select v-model='dataForm.confirmedUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="日期" prop="confirmedDate">
                        <el-date-picker v-model='dataForm.confirmedDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经办人" prop="handledUserId">
                        <user-select v-model='dataForm.handledUserId' placeholder='请选择' clearable>
                        </user-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="日期" prop="handledDate">
                        <el-date-picker v-model='dataForm.handledDate' placeholder='请选择' clearable
                            :style='{ "width": "100%" }' type='date' format='yyyy-MM-dd' value-format='timestamp'>
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="签名" prop="fIle">
                        <el-image  :src="dataForm.fIle"  style="width: 200px; height: 100px; " v-if="dataForm.fIle"></el-image >
                    </el-form-item>
                </el-col>

            </el-form>
        </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button :loading="saveLoading" type="primary" @click="dataFormSave()" :disabled="readOnly">保 存</el-button>
            <el-button :loading="btnLoading" type="success" @click="dataFormSubmit()" :disabled="readOnly">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>

import customerAPI from '@/api/q1/business/customer';
export default {
    data() {
        return {
            btnLoading: false,
            saveLoading:false,
            visible: false,
            readOnly:false,

            showImage:false,
            dataForm:
            {
                CustomerId: undefined,
                projectName: undefined,
                orderNo: undefined,
                customerCode: undefined,
                gdAddress: undefined,
                feedbackRemark: undefined,
                feedbackUserId: undefined,
                feedbackDate: undefined,
                process: undefined,
                confirmedUserId: undefined,
                confirmedDate: undefined,
                handledUserId: undefined,
                handledDate: undefined,
                fIle:undefined,

            },
            rules: {
                projectName: [{ required: true, message: '请填写项目名称', trigger: 'blur' },],
                orderNo: [{ required: true, message: '请填写订单号', trigger: 'blur' },],
                customerCode: [{ required: true, message: '请填写客户名称', trigger: 'blur' },],
                gdAddress: [{ required: true, message: '请填写工地地址', trigger: 'blur' },],
                feedbackRemark: [{ required: true, message: '请填写反馈问题描述', trigger: 'blur' },],
                feedbackUserId: [{ required: true, message: '请填写反馈人', trigger: 'blur' },],
                feedbackDate: [{ required: true, message: '请填写反馈日期', trigger: 'blur' },],
                process: [{ required: true, message: '请填写现场调查及处理过程', trigger: 'blur' },],
                confirmedUserId: [{ required: true, message: '请填写调查人', trigger: 'blur' },],
                confirmedDate: [{ required: true, message: '请填写日期', trigger: 'blur' },],
                handledUserId: [{ required: true, message: '请填写经办人', trigger: 'blur' },],
                handledDate: [{ required: true, message: '请填写日期', trigger: 'blur' },],
                fIle: [{ required: true, message: '请填写签名', trigger: 'blur' },],
            },


        }
    },
    created() {

    },
    methods: {

        init(data) {

            this.visible = true
            this.$nextTick(() => {
                this.$refs['elForm'].resetFields();
                console.log(data)
                customerAPI.getqmsbusicustomersurvey(data.id).then(res => {
                    //console.log(res)

                    this.dataForm = res.data
                    this.dataForm.CustomerId = data.id
                    if(!this.dataForm.customerCode){
                        this.dataForm.customerCode = data.customerName
                    }
                    
                    this.dataForm.enabledMark = 1
                    if(this.dataForm.fIle){
                        this.readOnly = true
                    
                    }else{
                        this.readOnly = false 
                       
                    }
                })
            })
        },



        dataFormSubmit() {
            this.$refs['elForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    const formMethod = !this.dataForm.id ? customerAPI.qmsbusicustomersurvey : customerAPI.updateqmsbusicustomersurvey;
                    formMethod(this.dataForm).then((res) => {
                        this.btnLoading = false;
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refresh', true)
                            }
                        })
                    }).catch((res) => {
                        this.btnLoading = false;
                    })
                }
            });

        },

        dataFormSave() {
         
                    this.saveLoading = true
                    const formMethod = !this.dataForm.id ? customerAPI.qmsbusicustomersurvey : customerAPI.updateqmsbusicustomersurvey;
                    formMethod(this.dataForm).then((res) => {
                        this.saveLoading = false;
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refresh', true)
                            }
                        })
                    }).catch((res) => {
                        this.saveLoading = false;
                    })
         

        }

    }
}
</script>